<template>
  <view class="my-attention">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <u-sticky bgColor="#fff">
      <div style="padding:24rpx">
      	<u-search placeholder="采购方公司名称" v-model="listQuery.buyerCompanyName" :showAction="false"  @search="searchList"></u-search>
      </div>
      <div style="width:80%;margin:0 auto">
        <u-tabs :list="tabList" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" @click="changeTab"
          :scrollable="false" lineWidth="60"></u-tabs>
      </div>

    </u-sticky>
    <div style="padding:32rpx" class="service-block">
      <view class="list-div">
		<div class="list-item" v-for="(item,index) in list" @click="toOrderInfo(item.orderId)" :key="index">
				  <div class="left">
					  <div class="top">{{item.buyerCompanyName}}</div>
					  <div class="bottom">数量：{{item.num}}吨</div>
				  </div>
				  <div class="right">
					  <div class="top">￥{{item.serviceCharge}}</div>
					  <div class="bottom">{{item.serviceChargeState == 1 ? "已结算" : "未结算"}}</div>
				  </div>
        </div>
        <div style="padding-bottom:40rpx;">
          <u-loadmore :status="status"></u-loadmore>
        </div>
      </view>
     

    </div>

  </view>
</template>

<script>
  import {serviceChargeList,pageSeo} from '@/config/api.js'

  const defaultListQuery = {
    "serviceChargeType": "all",
	buyerCompanyName:'',
    "pageSize": 10,
    "pageNum": 1
  };
  export default {
    data() {
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        status: 'loadmore',
        count: 0,
        tabList: [{ name: '全部',key:'all'}, {name: '已结算',key:'pay'},  {name:'未结算',key:'nopay'} ],
		list:[]
    
      }
    },
    onLoad() {
     this.clearData();
     this.getList()
    },
	async onShow() {
	// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
	// #endif	
	},
    onReachBottom() {
      if(this.list.length >= this.count) {
      	this.status = 'nomore';
      	return ;
      }
      this.listQuery.pageNum =  ++this.listQuery.pageNum;
      this.getList()
    },
    methods: {
		toOrderInfo(id){
			uni.navigateTo({
			    url:'/pagesUser/business/businessOrderInfo?orderId='+id
			})
		},
		searchList(){
			
			this.clearData();
			this.getList()
		},
		
		changeTab(tab){
			console.log(tab)
			this.listQuery.serviceChargeType = tab.key
			this.clearData()
			this.getList()
		},
		
      //清除数据
      clearData() {
        this.listQuery.pageNum  = 1;
        this.list = [];
        this.status = 'loadmore';
        this.count = 0;
      },
   
   
      getList() {
        const data = JSON.parse(JSON.stringify(this.listQuery))
        serviceChargeList(data).then(res => {
          this.count = res.count
          this.list = this.list.concat(res.list ? res.list : []);
		  console.log(this.list)
          if (this.list.length >= this.count) {
            this.status = 'nomore';
          } else {
            this.status = 'loadmore';
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/common.scss';
  .service-block{
  		  padding:0 24rpx;
  		  .list-div{
  			  .list-item{
  				  @include flexbox(space-between,center);
  				  padding:24rpx;
				  background: rgba(255,255,255,1);
				  border-radius: 18rpx;
				  margin-bottom:24rpx;
  				  .left{
  					  .top{
  						  font-size: 28rpx;
  						  line-height: 40rpx;
  						  color: #070D14;
  					  }
  					  .bottom{
  						  font-size: 24rpx;
  						  line-height: 40rpx;
  						  color: #929292;
  						  
  					  }
  				  }
  				  .right{
  					  .top{
  						  font-size: 28rpx;
  						  font-weight: bold;
  						  line-height: 38rpx;
  						  color: #FF3600;
  						  text-align: right;
  					  }
  					  .bottom{
  						  font-size: 24rpx;
  						  line-height: 40rpx;
  						  color: #929292;
  						  text-align: right;
  					  }
  				  }
  			  }
  		  }
  }
</style>